<template>
  <div class="shopping">
    <!-- 顶部搜索框 -->
    <!-- <i class="iconfont iconfont-31fanhui1"></i> -->
    <van-nav-bar title="购物车" :placeholder="true" :fixed="true" right>
      <template #left>
        <van-icon
          @click="onClickLeft"
          class-prefix="iconfont"
          name="31fanhui1"
          size="18"
        />
      </template>
      <template #right>
        <van-icon class-prefix="iconfont" name="gengduo1" size="18" />
      </template>
    </van-nav-bar>
    <!-- 分割线 -->
    <van-divider
      :style="{ color: '#999', borderColor: '#333', padding: '0 16px' }"
    >
      可能你还想要
    </van-divider>
    <!-- 提交栏 -->
    <van-submit-bar
      safe-area-inset-bottom
      :price="3050"
      button-text="提交订单"
      @submit="onSubmit"
      class="submit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
    <Tabbar />
  </div>
</template>

<script>
import Vue from 'vue';
import {
  NavBar,
  Image as VanImage,
  Icon,
  SubmitBar,
  Checkbox,
  CheckboxGroup,
  Divider,
  Toast,
} from 'vant';
import Tabbar from '../../components/tabbar.vue';

Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(SubmitBar);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(NavBar);
export default {
  components: {
    Tabbar,
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1);
    },
    onSubmit() {
      console.log('提交订单');
    },
    onClickEditAddress() {
      return console.log('修改地址');
    },
  },
  data() {
    return {
      checked: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.submit {
  bottom: 50px;
}
</style>
